<template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" style="max-width: 600px; margin: 20px;">
        <el-form-item label="选择日期时间范围" prop="dateRange">
            <!-- 添加label插槽 -->
            <template #label>
                <span>选择日期时间范围</span>
            </template>
            <el-date-picker v-model="form.dateRange" type="datetimerange" range-separator="To"
                start-placeholder="Start date" end-placeholder="End date" style="width: 100%;" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 表单引用
const formRef = ref(null)

// 表单数据
const form = reactive({
    dateRange: ['', ''] // 用于存储日期时间范围，数组形式 [开始时间, 结束时间]
})

// 校验规则
const rules = reactive({
    dateRange: [
        {
            required: true,
            validator: (rule, value, callback) => {
                // 验证数组是否有两个有效元素
                if (!value || value.length !== 2 || !value[0] || !value[1]) {
                    callback(new Error('请选择完整的日期时间范围'))
                } else {
                    callback() // 校验通过
                }
            },
            trigger: 'change' // 当选择变化时触发校验
        }
    ]
})

// 提交表单
const submitForm = async () => {
    if (!formRef.value) return
    try {
        await formRef.value.validate()
        ElMessage({
            message: '表单校验通过',
            type: 'success'
        })
        // 这里可以添加提交数据的逻辑
        console.log('表单数据:', form)
    } catch (error) {
        ElMessage({
            message: '请完成必填项',
            type: 'warning'
        })
        console.log('表单校验失败:', error)
    }
}

// 重置表单
const resetForm = () => {
    if (!formRef.value) return
    formRef.value.resetFields()
}
</script>